<template>
	<view v-if="pageError" class="page">
		<view class="error" @tap="initPage">[获取书记详情错误，点击重试]</view>
	</view>
	<view v-else class="page">
		<view class="head">
			<view class="head-right">
				<view class="head-right-lg">{{detail.title}}</view>
				<view class="head-right-sm">{{detail.author}}</view>
				<view class="head-right-sm">
					{{detail.cat}}
					<text class="split">·</text>
					{{detail.wordCount||'暂无字数'}}
				</view>
				<view class="head-right-sm">{{detail.updated}}更新</view>
			</view>
			<image class="default-cover head-img" :data-cover="detail.cover?'':'暂无封面'" :src="detail.cover"
				mode="scaleToFill"></image>
		</view>
		<view class="body" :style="{height:'calc(100%)'}">
			<!-- 按钮 -->
			<view class="btn-wrap">
				<button class="btn-wrap-btn" :class="{'bg-gray':isJoin}"
					@tap="joinBookshelf">{{isJoin?'移出书架':'加入书架'}}</button>
				<button class="btn-wrap-btn" @tap="beginRead(null)">开始阅读</button>
			</view>
			<view class="catalog" @tap="toggleCatalog">
				<view class="title">查看目录</view>
				<view class="content">
					<text class="content-lastchapter">{{detail.lastChapter}}</text>
					<text class="iconfont icon-jiantou"></text>
				</view>
			</view>
			<view class="desc">{{detail.longIntro}}</view>
		</view>

		<!-- 底部目录 -->
		<view class="catalog-box" v-show="catalogFlag">
			<view class="wrap" :class="catalogFlag?'botton-to-top':'top-to-botton'">
				<view class="wrap-head">
					<text class="iconfont icon-jiantou2" @tap="toggleCatalog"></text>
					<view class="text-bold">目录</view>
					<view class="order" @tap="sortHandler">{{descFlag?'倒序':'正序'}}</view>
				</view>
				<scroll-view class="scroll-view" scroll-y="true">
					<view :class="{'reverse':descFlag}">
						<view class="item" v-for="(item,index) in chapterData" :key="item.index"
							@tap="beginRead(index)">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 加载中 -->
		<cus-loading :show="loading" content="加载中"></cus-loading>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	}
	from 'vuex'
	export default {
		data() {
			return {
				id: '',
				detail: {},
				navbarH: this.$NavBar,
				headH: 0,
				isJoin: false,
				getChapterListCount: 10,
				catalogFlag: false,
				chapterData: [],
				descFlag: false,
				loading: false,
				pageError: false,
				retry: false
			}
		},
		computed: {
			...mapGetters({
				curSource: 'get_curSource',
				readHistorys: 'get_readHistorys',
			}),
		},
		async onLoad(option) {
			this.id = option.id
			this.isJoin = this.readHistorys.filter(item => item.bookshelf && item._id === option.id).length > 0
			this.initPage()
		},
		methods: {
			...mapActions(['updateReadHistory']),
			initPage() {
				this.loading = true
				this.pageError = false
				this.getBookDetail()
				this.getChapterList()
			},
			// 获取书籍详情
			async getBookDetail() {
				this.loading = true

				let res = await this.$store.dispatch('getBookDetail', this.id)
				if (res) {
					this.loading = false
					this.detail = res
				} else {
					this.loading = false
					this.pageError = true
				}
			},
			// 获取章节列表
			async getChapterList() {
				let res = await this.$store.dispatch('getChapterList', this.id)
				if (res) {
					this.chapterData = res
				}
			},
			// 加入书架/移出书架
			joinBookshelf() {
				let msg = ''
				let params = {
					...this.detail,
					index: 0,
					progress: 0,
					bookshelf: false,
					readHistory: true
				}
				let idx = this.readHistorys.findIndex(item => item._id === this.id)
				if (idx > -1) {
					params = {
						...params,
						index: this.readHistorys[idx].index,
						progress: this.readHistorys[idx].progress
					}
				}
				if (!this.isJoin) {
					params.bookshelf = true
					msg = '已加入书架'
				} else {
					msg = '已移出书架'
				}
				this.isJoin = !this.isJoin
				this.updateReadHistory(params)
				uni.showToast({
					icon: 'none',
					title: msg
				})
			},
			// 开始阅读：index有值是点击目录进来的，无值是点击阅开始阅读按钮进来的
			async beginRead(index) {
				index = !index ? 0 : index
				let params = {
					...this.detail,
					index: index,
					progress: 0,
					bookshelf: false,
					readHistory: true
				}
				if (!index) {
					let idx = this.readHistorys.findIndex(item => item._id === this.id)
					if (idx > -1) {
						params = {
							...params,
							index: this.readHistorys[idx].index,
							progress: this.readHistorys[idx].progress,
							bookshelf: this.readHistorys[idx].bookshelf,
						}
					}
				}
				this.updateReadHistory(params)
				uni.navigateTo({
					url: `/pages/public/bookContent?id=${this.id}&title=${this.detail.title}`,
					success: () => {
						this.catalogFlag = false
					}
				})
			},
			// 控制章节目录的显隐
			toggleCatalog() {
				this.catalogFlag = !this.catalogFlag
			},
			// 排序
			sortHandler() {
				this.descFlag = !this.descFlag
			},
		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		width: 100vw;
		height: 100vh;
		// margin-top: -44px;
		// padding-top: 44px;
		background-color: #bd8485;
		box-sizing: border-box;
	}

	.error {
		height: 100%;
		background-color: #ffffff;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.head {
		padding: 15px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.head-img {
			width: 75px;
			height: 100px;
			border-radius: 5px;
		}

		.head-right {
			padding-right: 8px;
			color: #fff;

			&-lg {
				font-size: 16px;
				font-weight: bold;
				padding-bottom: 7px;
			}

			&-sm {
				font-size: 14px;
				padding-top: 5px;

				.split {
					padding: 0 5px;
				}
			}
		}
	}

	.body {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		bottom: 0;
		border-radius: 20px 20px 0 0;

		.btn-wrap {
			display: flex;
			justify-content: space-evenly;
			padding-top: 15px;

			&-btn {
				width: 150px;
				background-color: #de7373;
				color: #fff;
			}
		}

		.catalog {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 15px;
			padding: 15px 0;
			border-top: 1px solid #f1f1f1;
			border-bottom: 1px solid #f1f1f1;

			.title {
				font-weight: bold;
				white-space: nowrap;

			}

			.content {
				font-size: 15px;
				color: #9d9b9b;
				white-space: nowrap;
				width: 480rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				line-height: 20px;

				&-lastchapter {
					display: inline-block;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.desc {
			font-size: 15px;
			margin: 15px;
			color: #222;
			line-height: 1.8;
		}
	}

	.catalog-box {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba($color: #000000, $alpha: 0.4);

		@keyframes bottonToTop {
			0% {
				height: 0;
			}

			100% {
				height: 90%;
			}
		}

		.wrap {
			position: absolute;
			width: 100%;
			height: 90%;
			bottom: 0;
			background-color: #FFFFFF;
			border-radius: 20px 20px 0 0;
			animation: bottonToTop .5s;

			.wrap-head {
				height: 60px;
				border-bottom: 1px solid #f1f1f1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30px;
				font-size: 17px;

				.order {
					font-size: 15px;
				}
			}

			.scroll-view {
				height: calc(100% - 60px);

				.item {
					padding: 0 30px;
					height: 48px;
					line-height: 48px;
					font-size: 15px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.text-bold {
		font-weight: bold;
	}

	.bg-gray {
		background-color: #999999 !important;
	}

	.reverse {
		display: flex;
		flex-direction: column-reverse;
	}
</style>
